import 'package:flutter/material.dart';
import 'listData.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primarySwatch: Colors.pink),
        home: Scaffold(
          appBar: AppBar(title: Text('AspectRatio & Card')),
          body: HomePage(),
        ));
  }
}

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    // AspectRatio根据设置调整子元素child的宽高比（自己的宽度是100%）
    /*return AspectRatio(
        aspectRatio: 2.0/1.0,
        child: Container(
          color: Colors.green,
        ),
    );*/

    // Card案例1
    /*return ListView(
      children: <Widget>[
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              ListTile(
                title: Text('张三', style: TextStyle(fontSize: 20),),
                subtitle: Text('web前端工程师'),
              ),
              ListTile(
                title: Text('电话：13386877038'),
              ),
              ListTile(
                title: Text('地址：辽宁省沈阳市国际软件园'),
              )
            ],
          ),
        ),
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              ListTile(
                title: Text('李四', style: TextStyle(fontSize: 20),),
                subtitle: Text('php工程师'),
              ),
              ListTile(
                title: Text('电话：13386877039'),
              ),
              ListTile(
                title: Text('地址：辽宁省沈阳市国际软件园'),
              )
            ],
          ),
        )
      ],
    );*/
    
    // Card案例2
    return ListView(
      children: tempData.map((value){
        return Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              AspectRatio(
                aspectRatio: 16/9, // 图片宽高比
                child: Image.network(value['imageUrl'], fit: BoxFit.cover,),
              ),
              ListTile(
                title: Text('CircleAvatar-${value['title']}'),
                subtitle: Text('CircleAvatar圆形头像组件-推荐这个写法-${value['author']}'),
                /*leading: ClipOval(
                  child: Image.network('https://www.itying.com/images/flutter/2.png',width: 50,height: 50,fit: BoxFit.cover,),
                ),*/
                leading: CircleAvatar( // CircleAvatar圆形头像组件--推荐这个写法
                  backgroundImage: NetworkImage(value['imageUrl']),
                ),
              )
            ],
          ),
        );
      }).toList(),
    );
    
  }
}

